<template>
  <!-- 组件结构 -->
  <div class="demo">
    <h2>学生姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
  </div>
</template>


<!-- 
ES6模块化：3种暴露方式
    1.分别暴露
        export const a = 10
        export const getData = () => { }
        - 引用：import {???} from ???
    2.统一暴露
        export {school}
        - 引用：import {???} from ???
    3.默认暴露（用得多，当暴露的东西只有一个的时候，引入就只需要 import ??? from ???）
        export default school
        - 引用：import ??? from ???
-->
<script>
import Vue from 'vue'
// 组件交互的相关代码（数据、方法等）
// 第一步：创建school组件
export default Vue.extend({ // Vue.extend()可以省略
  name: 'Student',
  /*   template: `
            <div>
              <h2>学校名称：{{name}}</h2>
              <h2>学校地址：{{age}}</h2>
            </div>
        `, */
  data() {
    return {
      name: '张三',
      age: 18
    }
  },
})
</script>

<style>
/* 组件样式 */
.demo {
  background-color: orange;
}
</style>
